
import { Component } from 'react'
import './App.css';
// react组件的名字首字母必须大写 因为组件使用时要用大写的形式
import Tab from './components/Tab'
// var a = 1
// 每一个组件都是一个构造函数 所以react的组件文件建议首字母大写
// function App() {
//   return (
    
//   );
// }
// class 是一个语法糖 用来声明一个类 其实就相当于声明了一个构造函数
// var that = ''
// extends 是class类的继承方法 前面是子类 后面是父类
// var fn = () => {}
// state设置react状态的方法
class App extends Component {
  constructor() {
    // that = this
    super()
    this.state = {
      a: 1
    }
  }
  // react没有完成数据双向绑定
  fn = () => {
    // console.log(this);
    // ++ -- 这类型运算符的返回值都是老值
    this.state.a++
    var b = this.state.a
    // console.log(b);
    // var that = this
    this.setState({
      a: b
    })
  }

  getArr(text) {
    console.log(text);
  }
  render() {
    let arr = ['首页', '订单', '发现', '我的']
    let arr2 = ['德玛西亚', '诺克萨斯', '艾欧尼亚', '祖安']
    return (
      // tab是App的子组件
      // className 相当于class
      <div className="App">
        {/* 你是个麻瓜 */}
        {/* <span>{this.state.a}</span>
        <button onClick={this.fn}>点击</button> */}
        {/* react父组件向子组件传值 和vue大致相同 将数据赋值给一个自定义属性 */}
        <Tab arr={arr} getArr={this.getArr}/>

        {/* <Tab arr={arr2}></Tab> */}
      </div>
    )
  }
}

export default App;
